<script setup lang="ts">
	import { computed, onMounted, reactive, ref } from 'vue'
	import { auditFail, auditOk, queryTeamDetail, queryTeammateList, removePerson, submitAuditApi } from '@/api/team'
	import switchRadio from '@/components/switchRadio/suitchRadio.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { getCertificationInfo, queryUserRole } from '@/api/user';
	import { checkLogin, msg } from '@/utils/tools';
	import { useStore } from 'vuex';
	import { orderRefund } from '@/api/match';
	const store = useStore();
	const paging = ref()
	const teamDetail = ref({})
	const teamId = ref("");
	const teammateList = ref([]);
	const modalShow = ref(false);
	const state = reactive({
		status: "",
		remark: "",
	});
	const auditTeam = ref({})
	const typeItem = ref("");

	const statusList = [
		{
			value: "1",
			label: "通过",

		},
		{
			value: "0",
			label: "驳回",

		}
	]

	const userRole = ref({});

	const tabList = ref([
		{ name: '全部', type: "" },
		{ name: '审核中', type: "UNDER_REVIEW" },
		{ name: '审核通过', type: "APPROVED_BY_REVIEW" },
		{ name: '审核未通过', type: "REVIEW_FAILED" },
		{ name: '已移除', type: "REMOVED" },
	])

	onMounted(() => {
		queryUserRole().then(res => {
			console.log(res)
			userRole.value = res.data;
		})
	})


	const showBtn = computed(() => {
		return !![...teamDetail.value.ldOpenIdList, ...teamDetail.value.jlOpenIdList].find(item => store.state.user.openId == item) && teamDetail.value.examineStatus !== "UNDER_REVIEW" && teamDetail.value.examineStatus !== "APPROVED_BY_REVIEW";
	})
	
	// 当前用户是否未球队领队或教练
	const isLdJl = computed(() => {
		return !![...teamDetail.value.ldOpenIdList, ...teamDetail.value.jlOpenIdList].find(item => store.state.user.openId == item)
	})

	onLoad((options : any) => {
		teamId.value = options.teamId;
		getTeamDetail(options.teamId)
	})

	const getTeamDetail = async (id) => {
		const res = await queryTeamDetail(id);
		teamDetail.value = { ...res.data, area: `${res.data.provinceName}/${res.data.cityName}/${res.data.districtName}` };
		console.log(res.data);
	}

	const loadFun = (pageNum : number, pageSize : number) => {
		queryTeammateList({ pageNum, pageSize, teamId: teamId.value, examineStateEnum: typeItem.value }).then(res => {
			if (res.code == 200) {
				paging.value.complete(res.data.list)
			} else {
				paging.value.complete([])
			}
		}).catch(err => {
			paging.value.complete(false)
		})
	}

	const translateStatus = (status) => {
		switch (status) {
			case "REMOVED":
				return "已移除";
			case "UNDER_REVIEW":
				return "审核中";
			case "APPROVED_BY_REVIEW":
				return "审核通过";
			case "REVIEW_FAILED":
				return "审核未通过";
			default:
				return "未知类型";
		}
	}

	const translateStatus1 = (status) => {
		switch (status) {
			case "NOT_APPLIED_FOR":
				return "待提交";
			case "UNDER_REVIEW":
				return "审核中";
			case "APPROVED_BY_REVIEW":
				return "审核通过";
			case "REVIEW_FAILED":
				return "审核未通过";
			default:
				return "未知类型";
		}
	}

	const showAudit = computed(() => {
		return !![...teamDetail.value.ldOpenIdList, ...teamDetail.value.jlOpenIdList].find(item => store.state.user.openId == item) && (teamDetail.value.examineStatus == "NOT_APPLIED_FOR" || teamDetail.value.examineStatus == "REVIEW_FAILED");
	})

	const translateType = (type) => {
		switch (type) {
			case 1:
				return "支付成功";
			case 2:
				return "转入退款";
			case 3:
				return "未支付";
			case 4:
				return "已关闭";
			case 5:
				return "已撤销";
			case 6:
				return "用户支付中";
			case 7:
				return "支付失败";
		}
	}

	const navigatorTo = (data : any) => {
		uni.navigateTo({ url: `/pages/teamPeople/teamPeople?campId=${data.id}` })
	}
	const goDetail = (data) => {
		uni.navigateTo({
			url: `/pages/personInfo/personInfo?regId=${data.id}&flag=${isLdJl.value}`
		})
	}
	const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
	const remove = (data) => {
		uni.showModal({
			title: '温馨提示',
			content: '确认移除队员吗？',
			confirmText: "确认",
			showCancel: true,
			confirmColor: '#92C75B',
			success: (res) => {
				if (res.confirm) {
					removePerson({ teamId: teamDetail.value.id, regId: data.id }).then(res => {
						msg("移除队员成功");
						paging.value.reload();
					})
				}

			}
		})
	}
	const auditTeammate = (data) => {
		auditTeam.value = data;
		modalShow.value = true;
	}

	const cancel = () => {
		modalShow.value = false;
	}
	const confirm = () => {
		if (state.status == "1") {
			auditOk({
				teamId: teamDetail.value.id,
				regId: auditTeam.value.id,
				remark: state.remark || "通过",
			}).then(res => {
				msg("审核通过");
				modalShow.value = false;
				paging.value.reload();
				getTeamDetail(teamId.value);
			})
			state.status = "";
			state.remark = "";
		} else if (state.status == "0") {
			auditFail({
				teamId: teamDetail.value.id,
				regId: auditTeam.value.id,
				remark: state.remark || "不通过",
			}).then(res => {
				msg("成功驳回");
				modalShow.value = false;
				paging.value.reload();
				getTeamDetail(teamId.value);
			})
			state.status = "";
			state.remark = "";
		} else {
			msg("请选择审核状态")
		}
	}
	const tabClick = (data : any) => {
		typeItem.value = data.type
		paging.value.reload()
	}
	const submitAudit = () => {
		submitAuditApi({ teamId: teamDetail.value.id }).then(res => {
			msg("提交审核成功");
			getTeamDetail(teamId.value)
		})
	}
	// 退款
	const refund = (data : any) => {
		orderRefund({
			orderNo: data?.order?.orderNo,
			amount: data?.order?.orderAmount,
			refundRemark: '退款'
		}).then(res => {
			if (res.code == 200) {
				msg('退款成功')
				paging.value.refresh()
			} else {

			}
		}).catch(err => {
		})

	}
</script>

<template>

	<z-paging ref="paging" class="z-paging" v-model="teammateList" @query="loadFun">
		<template #top>
			<xx-title title="球队详情" />
			<view class="team-info">
				<view class="name">
					{{teamDetail.name}}
				</view>
				<view class="info">
					<view class="line">
						<view class="label">
							赛事名称
						</view>
						<view class="value">
							<text class="label1">：</text>{{teamDetail.gameName}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							赛事级别
						</view>
						<view class="value">
							<text class="label1">：</text>{{teamDetail.gameLevel==1?"市（州）":"县（市区）"}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							组别
						</view>
						<view class="value">
							<text class="label1">：</text>{{teamDetail.groupName}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							地区
						</view>
						<view class="value">
							<text class="label1">：</text>{{teamDetail.area}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							机构
						</view>
						<view class="value">
							<text class="label1">：</text>{{teamDetail.companyName}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							领队
						</view>
						<view class="value">
							<text
								class="label1">：</text>{{`${teamDetail.ldCount} (${teamDetail.gameGroupEntity.ldMin}${teamDetail.gameGroupEntity.ldMax>teamDetail.gameGroupEntity.ldMin?` - ${teamDetail.gameGroupEntity.ldMax}`:""})`}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							教练
						</view>
						<view class="value">
							<text
								class="label1">：</text>{{`${teamDetail.jlCount} (${teamDetail.gameGroupEntity.jlMin}${teamDetail.gameGroupEntity.jlMax>teamDetail.gameGroupEntity.jlMin?` - ${teamDetail.gameGroupEntity.jlMax}`:""})`}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							助理教练
						</view>
						<view class="value">
							<text
								class="label1">：</text>{{`${teamDetail.zljlCount} (${teamDetail.gameGroupEntity.zljlMin}${teamDetail.gameGroupEntity.zljlMax>teamDetail.gameGroupEntity.zljlMin?` - ${teamDetail.gameGroupEntity.zljlMax}`:""})`}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							运动员
						</view>
						<view class="value">
							<text
								class="label1">：</text>{{`${teamDetail.ydyCount} (${teamDetail.gameGroupEntity.ydyMin}${teamDetail.gameGroupEntity.ydyMax>teamDetail.gameGroupEntity.ydyMin?` - ${teamDetail.gameGroupEntity.ydyMax}`:""})`}}
						</view>
					</view>
					<view class="line">
						<view class="label">
							报名状态
						</view>
						<view class="value">
							<text class="label1">：</text>{{translateStatus1(teamDetail.examineStatus)}}
						</view>
					</view>
				</view>
			</view>
			<view style="background: #FFFFFF">
				<up-tabs :list="tabList" @click="tabClick" lineColor="#90C762"
					:activeStyle="{color:'#90C762',fontWeight:'500'}" :inactiveStyle="{color:'#212223'}"
					:scrollable="false"></up-tabs>
			</view>
			<up-modal :show="modalShow" v-if="modalShow" :showCancelButton="true" @cancel="cancel" @confirm="confirm">
				<view class="modify">
					<view class="title">审核队员</view>
					<view class="form-item">
						<view class="item-label required">审核状态：</view>
						<view class="item-value">
							<switch-radio v-model="state.status" :list="statusList" />
						</view>
					</view>
					<view class="form-item">
						<view class="item-label">审核意见：</view>
						<view class="item-value">
							<input class="uni-input" v-model="state.remark" focus placeholder="请输入审核意见" />
						</view>
					</view>
				</view>
			</up-modal>

			<view v-if="showAudit" class="audit-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`,zIndex:1000}">
				<view class="btn">
					<view class="personal-registration" @click="submitAudit">提交审核</view>
				</view>
			</view>
		</template>
		<view class="container">
			<view class="teammate-item" v-for="item in teammateList" :key="item.id">
				<view class="left">
					<img style="width:100%; height: 100%;" :src="item.photo" alt="" />
				</view>
				<view class="right">
					<view class="username">
						<view class="name">
							{{item.competeName}}
						</view>
						<view class="toolbar">
							<view class="button primary" @click="goDetail(item)">
								详情
							</view>
							<view v-if="showBtn&&item.examineState=='APPROVED_BY_REVIEW'" class="button error"
								@click="remove(item)">
								移除
							</view>
							<view v-if="showBtn&&item.examineState!='APPROVED_BY_REVIEW'&&item.order?.payStatus==1"
								class="button default" @click="auditTeammate(item)">
								审核
							</view>
							<view v-if="showBtn&&item.order?.payStatus==1 && item.regType=='SPORTS_MAN'" class="button default" @click="refund(item)">
								退款
							</view>
						</view>

					</view>
					<view class="box">
						<view class="status">
							<view class="status-line">
								报名状态：{{translateStatus(item.examineState)}}
							</view>
							<view class="status-line">
								付款状态：{{translateType(item?.order?.payStatus)}}
							</view>
						</view>
						<view class="time">{{item.createTime}}</view>
					</view>

				</view>
			</view>
		</view>
	</z-paging>
</template>

<style scoped lang="scss">
	.team-info {
		position: relative;
		background: #FFFFFF;
		margin: 28rpx;
		overflow: hidden;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-image: linear-gradient(#5BA3A0, #7ABA88);
		color: #ffffff;
		box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.01), 0 4px 5px 0 rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

		.name {
			font-weight: 600;
			font-size: 50rpx;
			margin-bottom: 20rpx;
		}

		.info {
			.line {
				display: flex;
				align-items: flex-start;


				.label {
					flex: 0 0 140rpx;
					text-align: justify;
					text-align-last: justify;
					text-justify: inter-ideograph;
				}

				.label1 {
					color: #ffffff;
				}

				.value {
					flex: 1 1 auto;
					color: #505363;
				}
			}

			padding-bottom: 10rpx;
		}

	}


	.modify {
		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}

		.form-item {
			width: 100%;
			display: flex;
			align-items: center;

			.item-label {
				width: 210rpx;

				&.required {
					position: relative;
					padding-left: 20rpx;

					&:before {
						content: '*';
						display: block;
						position: absolute;
						color: #ff3c3c;
						top: 0;
						left: 0;
					}
				}
			}

			.item-value {
				width: calc(100% - 210rpx);
			}
		}
	}

	.container {
		padding: 0 20rpx 20rpx;

		.teammate-item {
			display: flex;
			align-items: start;
			padding: 10rpx;
			border: 1px solid #cacaca;
			margin-top: 20rpx;
			border-radius: 12rpx;
			padding: 20rpx 12rpx;
			box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.01), 0 4px 5px 0 rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

			.left {
				flex: 0 0 140rpx;
				height: 140rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				margin-left: 12rpx;
				flex: 1 1 auto;

				.username {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					padding: 0rpx 0 12rpx;
					border-bottom: 1px solid #999999;

					.name {
						font-size: 40rpx;
						font-weight: 600;
						color: #000000;
					}

					.toolbar {
						margin-top: 16rpx;

						.button {
							display: inline-block;
							border-radius: 6rpx;
							color: #ffffff;
							font-weight: bold;
							font-size: 26rpx;
							padding: 10rpx 30rpx;
							box-shadow: 1px 2px #F5F5F5;
							margin-left: 12rpx;

							&.primary {
								background-color: #96C662;
							}

							&.error {
								background-color: #EB3324;
							}

							&.default {
								background-color: #F6BD4C;
							}
						}
					}

				}

				.box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.time {
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						margin-top: 44rpx;
					}


				}


			}
		}
	}

	.audit-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		border-top: 1px solid #F1F2F4;
		padding-top: 14rpx;
		z-index: 10;
		background-color: #FFFFFF;

		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.personal-registration {
			background: #FFD200;
			border-radius: 16rpx;
			width: calc(100% - 20rpx);
			border: 1rpx solid #FFD200;
			padding: 16rpx 0;
			letter-spacing: 2rpx;
			font-weight: 500;
			text-align: center;
			font-family: OPPOSans, OPPOSans;
			font-weight: normal;
			font-size: 28rpx;
			color: #333333;
			font-style: normal;
		}
	}
</style>